// 1. 导入`react-dom/client`
import React from 'react';
import ReactDOM from 'react-dom/client';

// 2 创建渲染的根节点
const root = ReactDOM.createRoot(document.getElementById('root'));

// 数据
const name = 'Jack';
const age = 18;
const likes = ['吃饭', '睡觉', '敲代码'];
const obj = { name: 'Rose', age: 18 };
const isLoading = false;
const fn = () => {
  return <div>函数返回的JSX</div>;
};
const ui = <div>大家好</div>;
const imgURL =
  'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089faxxxx7d55720d6cf.png';

// 使用JSX语法创建标签
const list = (
  <div>
    <div>{name}</div>
    <div>{age}</div>
    <div>{likes.join('=>')}</div>
    <div>
      {obj.name},{obj.age}
    </div>
    {isLoading ? <div>加载中...</div> : <div>数据加载完毕</div>}
    {fn()}
    {ui}
    <img src={imgURL} alt="头像"></img>
  </div>
);

root.render(list);
